<template>
  <!-- 大框 -->
  <div class="pl-box">
    <!-- 里面小大框 -->
    <div class="plmi-box">
      <div class="plmi-top">
        <!-- 左边图片 -->
        <div class="pm-l">
          <img :src="topList.coverImgUrl" alt="" />
        </div>
        <!-- 右边名称 -->
        <div class="pm-r">
          <!-- 上边 -->

          <div class="pm-ri">
            <i></i>
            <span>{{ topList.name }}</span>
          </div>
          <div class="pm-rii" v-if="topList.creator">
            <img :src="topList.creator.avatarUrl" alt="" />
            <a @click="gouserhome( topList.creator.userId)">{{ username }}</a>
            <!-- 等级图标先不做 -->
            <!-- <i></i> -->
            <span>{{ made }} 创建</span>
          </div>
          <!-- 六个图标 -->
          <div class="icon">
            <a href="JavaScript:;" class="btn-i bg" @click="addSongList"
              ><i>播放</i></a
            >
            <a href="JavaScript:;" class="btn-ii bg"></a>
            <a href="JavaScript:;" class="btn-iii bg u-btn-i"
              ><i class="bg u-btn"
                >{{ parseInt(topList.subscribedCount / 10000) }}万</i
              ></a
            >
            <a href="JavaScript:;" class="btn-iiii bg u-btn-i">
              <i class="bg u-btn">{{ topList.shareCount }}</i></a
            >
            <a href="JavaScript:;" class="btn-iiiii bg u-btn-i">
              <i class="bg u-btn">下载</i></a
            >
            <a href="JavaScript:;" class="btn-iiiiii bg">
              <i class="bg"
                >(<span>{{ topList.commentCount }}</span
                >)</i
              ></a
            >
          </div>
          <!-- 三个标签 -->
          <div class="pm-riii">
            <span> 标签: </span>
            <a
              class="a-icon bg"
              v-for="(aicon, index) in topList.tags"
              :key="index"
            >
              <i class="bg">{{ aicon }}</i>
            </a>
          </div>
          <!-- 介绍 -->
          <div class="introduce lyric" ref="ulric">
            <p v-for="(description, index) in newdescription" :key="index">
              {{ description ? description : "\xa0" }}
            </p>
          </div>
          <div @click="changelyrics">
            <a style="color: rgb(41, 23, 178)">{{
              islyrics ? "展开" : "收起"
            }}</a>
          </div>
        </div>
      </div>

      <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
      <!-- 歌曲列表 -->
      <div class="pl-btn">
        <div class="pl-btn-top">
          <span class="pl-btn-t"
            >歌曲列表
            <p>{{ topList.trackCount }}首歌</p></span
          >
          <div class="pl-btn-r">
            <a>生成外链播放器</a>
            <span class="btn-tp">
              播放：
              <p>{{ topList.playCount }}</p>
              次
            </span>
          </div>
        </div>
        <!-- 表格 -->
        <div class="m-table">
          <div class="w2"></div>
          <div class="w2">
            <span>歌词标签</span>
          </div>
          <div class="w2">
            <span>时长</span>
          </div>
          <div class="w2">
            <span>歌手</span>
          </div>
          <div class="w2 s1">
            <span>专辑</span>
          </div>
        </div>
        <!-- 文字 -->
        <div
          class="m-text"
          v-for="(trackList, index) in trackList"
          :key="trackList.id"
        >
          <div class="t1 t2">
            <span>{{ index + 1 }}</span>
            <i
              class="t1-span"
              @click="playMusic(trackList.id, trackList.al.picUrl)"
            ></i>
          </div>

          <div class="t1">
            <a @click="gosong(trackList.id)">{{ trackList.name }}</a>
          </div>

          <div class="t1">
            <span>{{ moment(trackList.dt).format("mm:ss") }}</span>
          </div>

          <div class="t1">
            <div class="t1-a1">
              <div class="t1-as">
                <a v-for="(arName, index) in trackList.ar" :key="arName.id"
                 @click="goartist(arName.id)">{{ arName.name }}
                  <span v-if="index < trackList.ar.length - 1">/</span></a
                >
              </div>
            </div>
          </div>

          <div class="t1">
            <a @click="goalbumpage(trackList.al.id)" > {{ trackList.al.name }}</a>
          </div>
        </div>
        <!-- <Medley :songs="trackList" /> -->
      </div>

      <!-- 查看更多内容 -->
      <div class="pl-cha">
        <span>查看更多内容，请下载客户端</span>
        <a> 立即下载</a>
      </div>
    </div>

    <!-- 评论区 -->
    <Review :musicAreasList="musicAreasList" />

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="musicAreasList.total / 2"
      @current-change="changepage"
      
    >
    </el-pagination>
  </div>
</template>

<script>
import moment from "moment";
import Review from "@/components/Review";
import { mapState } from "vuex";
export default {
  name: "LeftPlayList",
  components: {
    Review,
  },
  data() {
    return {
      id: this.$route.query.id,
      //   评论区
      musicAreasList: {},
      // //   歌单列表
      // newTrackList: {},
      //   歌单详情
      topList: {},
      made: "",
      //   详情
      newdescription: [],

      // islyrics 展开收缩
      islyrics: true,
      avatarUrl: "",
      username: "",
      moment,
      // 分页
      limit: 20,
      limitIndex: 0,
    };
  },
  mounted() {
    this.getCommentPlayList();
    this.getTrackAll();
    this.getPaylistDetail();
  },
  methods: {
    // 根据id获取评论区
    async getCommentPlayList() {
      const data = {
        id: this.id,
        limit: this.limit,
        // 条数乘以分页数
        offset: this.limit * this.limitIndex,
      };
      const result = await this.$API.reqCommentPlayList(data);
      // console.log(result);
      if (result.code == 200) {
        this.musicAreasList = result || {};
      } else {
        this.$msg.error("获取评论区失败")
      }
    },
    // 分页监听器
    changepage(index) {
      // console.log(index)
      this.limitIndex = index - 1;
      this.getCommentPlayList();
    },
    // reqTrackAll 获取列表
    async getTrackAll() {
      const params = {
        id: this.id,
        limit: 20,
        offset: 0,
      };
      // const resule = await this.$API.reqTrackAll(params);
      this.$store.dispatch("getTrackAll", params);
      // console.log(resule);
    },

    // 传参到播放列表
    playMusic(ids, picUrl) {
      //  console.log(this)
      this.$store.dispatch("getDetailList", ids);
      const big = {
        ids,
        picUrl,
      };
      this.$bus.$emit("singid", big);
    },
    // 查询表单详情
    // 获取榜单音乐详情reqPaylistDetail
    async getPaylistDetail() {
      const resule = await this.$API.reqPaylistDetail(this.id);
      // console.log(resule);

      if (resule.code == 200) {
        this.topList = resule.playlist || [];
        this.made = moment(resule.playlist.trackUpdateTime).format(
          "YYYY-MM-DD"
        );
        // 处理/n
        let n = /\n/;
        if (resule.playlist.description) {
          this.newdescription = resule.playlist.description.split(n) || [];
          (this.avatarUrl = resule.playlist.creator.avatarUrl || ""),
            (this.username = resule.playlist.creator.nickname);
        }

        // console.log(newdescription)
      } else {
        this.$msg.error("获取喜欢列表失败")
      }
    },

    // 改变展开或者收起
    changelyrics() {
      if (this.islyrics) {
        this.islyrics = false;
        this.$refs.ulric.className = "lyrics";
      } else {
        this.islyrics = true;
        this.$refs.ulric.className = "lyric";
      }
    },
    // 添加到歌单
    addSongList() {
      const params = {
        id: this.id,
        limit: 20,
        offset: 0,
      };
      // const resule = await this.$API.reqTrackAll(params);
      this.$store.dispatch("addTrackAll", params);
      setTimeout(() => {
        this.$bus.$emit("changeOne");
      }, 1000);
    },
    // 跳转歌曲页
    gosong(id) {
      this.$router.push(`/song?ids=${id}`);
    },
    // 专辑
    goalbumpage(id) {
      this.$router.push(`/albumpage?id=${id}`);
    },
    // 跳转歌手
    goartist(id) {
      // console.log(id)
      this.$router.push(`/artist?id=${id}`);
    },
        //主页
    gouserhome(id){
      this.$router.push(`/userhome?id=${id}`);
    }
  },
  computed: {
    ...mapState({
      trackList: (state) => {
        return state.PlayList.trackList;
      },
    }),
  },
};
</script>

<style lang="less" scoped>
// 显示全部
.lyrics {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 显示十条
.lyric {
  margin-top: 10px;

  font-size: 12px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-box {
  width: 640px;
  margin: 10px auto;
  .plmi-top {
    display: flex;
    .pm-l {
      img {
        width: 208px;
        height: 208px;
      }
    }
    .pm-r {
      padding-left: 20px;
      width: 410px;
      .pm-ri {
        display: flex;
        i {
          margin-right: 10px;
          display: inline-block;
          width: 54px;
          height: 24px;
          background-position: 0 -243px;
          overflow: hidden;
          vertical-align: middle;
          background-image: url("~@/assets/image/icon.png");
        }
        span {
          display: inline-block;
          font-weight: normal;
          font-size: 20px;
        }
      }
      .pm-rii {
        margin-top: 10px;
        display: flex;
        align-content: center;
        img {
          width: 35px;
          height: 35px;
        }
        a {
          display: inline;
          margin-left: 10px;
          color: #0c73c2;
          font-size: 12px;
          line-height: 35px;
        }
        span {
          display: inline;
          margin-left: 10px;
          font-size: 12px;
          color: #999;
          line-height: 35px;
        }
      }
      .pm-riii {
        margin-top: 10px;
        span {
          font-size: 12px;
        }
        .a-icon {
          margin-left: 10px;
          width: 35px;
          padding: 0 10px 0 0;
          text-shadow: 0 1px #fdfdfd;
          background-position: right -26px;
          display: inline;
          i {
            width: 45px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            color: #777;
            font-size: 12px;
            background-position: 0 0;
            text-align: end;
            font-style: normal;
          }
        }
      }
      .introduce {
        margin-top: 10px;
        p {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
  .pl-btn {
    // 歌词列表
    .pl-btn-top {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      border-bottom: solid 2px red;
      padding-bottom: 5px;
      .pl-btn-t {
        font-size: 20px;
        display: flex;
        align-items: flex-end;
        p {
          display: inline;
          margin-left: 10px;
          font-size: 12px;
        }
      }

      .pl-btn-r {
        display: flex;
        align-items: flex-end;

        a {
          color: #4996d1;
          font-size: 12px;
        }
        .btn-tp {
          color: #666;
          margin-left: 20px;
          display: flex;
          font-size: 12px;
          p {
            color: #c20c0c;
            font-weight: bold;
            display: block;
          }
        }
      }
    }
    // 表格
    .m-table {
      width: 100%;
      display: grid;
      // grid-template-columns :repeat(auto-fill,);
      height: 35px;
      background-color: rgb(248, 248, 248);
      // grid布局
      grid-template-columns: 74px auto 111px 14% 20%;
      border: solid 1px rgb(216, 216, 216);
      .w2 {
        // border: solid 1px rgb(216, 216, 216);
        border-right: 1px solid rgb(216, 216, 216);
        span {
          font-size: 12px;
          color: #666;
          display: inline;
          margin-left: 5px;
        }
      }
      .s1 {
        border-right: none;
      }
    }
    // 歌单列
    .m-text {
      width: 100%;
      display: grid;
      font-size: 12px;
      // grid-template-columns :repeat(auto-fill,);
      height: 35px;
      background-color: rgb(247, 247, 247);
      // grid布局
      border: solid 1px rgb(216, 216, 216);
      grid-template-columns: 74px auto 111px 14% 20%;
      align-items: center;
      a {
        color: rgb(27, 25, 25);
      }
      .t1 {
        margin-left: 10px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        .t1-a1 {
          .t1-as {
            width: 75px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
        }
      }

      .t2 {
        display: flex;
        justify-content: space-between;
        .t1-span {
          display: inline-block;
          margin-right: 10px;
          width: 17px;
          height: 17px;
          cursor: pointer;
          background-position: 0 -103px;
          background-image: url("~@/assets/image/table.png");
        }
      }
    }
    .m-text:nth-child(2n + 1) {
      background-color: rgb(255, 255, 255);
    }
  }
  // 查看更多
  .pl-cha {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 150px;
    a {
      display: inline;
      background-color: #c20c0c;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 30px;
      margin-top: 20px;
      color: #fff;
      width: 100px;
    }
  }
}

// 图标背景
.bg {
  background-image: url("~@/assets/image/button2.png");
}
// 六个icon
.icon {
  margin-top: 15px;
  display: flex;
  height: 40px;
  align-items: center;
  a {
    color: #000;
  }
  .btn-i {
    display: inline-block;
    width: 66px;
    height: 31px;
    // background-position: right -428px;
    background-position: 0 -387px;
    text-align: end;
    i {
      margin-right: 5px;
      // margin-top: 10px
      line-height: 28px;
      color: #fff;
      font-style: normal;
    }
  }
  .btn-ii {
    display: inline-block;
    width: 38px;
    height: 31px;
    background-position: 0 -1588px;
  }
  .btn-iii {
    // background-position: right -1020px;
    i {
      background-position: 0 -977px;
    }
  }
  .btn-iiii {
    i {
      background-position: 0 -1225px;
    }
  }
  .btn-iiiii {
    i {
      background-position: 0 -2761px;
    }
  }
  .btn-iiiiii {
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    width: 87px;
    cursor: pointer;
    background-position: right -1019px;
    margin-right: 10px;
    i {
      font-size: 12px;
      //   color: #000;
      display: inline-block;
      width: 84px;
      height: 31px;
      text-align: right;
      line-height: 31px;
      min-width: 23px;
      cursor: pointer;
      background-position: 0 -1465px;
      font-style: normal;
    }
  }
}

// 六个标签要用的公共样式
.u-btn-i {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  width: 60px;
  cursor: pointer;
  background-position: right -1019px;
  margin-right: 10px;
}
// 六个图标要用的i样式
.u-btn {
  font-size: 12px;
  //   color: #000;
  display: inline-block;
  width: 56px;
  height: 31px;
  text-align: right;
  line-height: 31px;
  min-width: 23px;
  cursor: pointer;
  font-style: normal;
}
</style>
